<template>
	<view class="padding-bottom">
		<!-- 发票明细 start -->
		<view class=" bg-white border-box  text-lg solid-top">
			<view class="flex  align-center padding-left-48 padding-right padding-tb justify-between relative">
				<view class=" text-333 text-bold  ">
					{{ i18n["发票类型"] }}
				</view>
				<view class="">
					<text>{{ i18n["电子发票"] }}</text>
				</view>
			</view>

			<view class="flex text-theme text-bold text-333 text-df bg-item  padding-left-48 padding-right padding-tb">
				{{ i18n["发票信息"] }}
			</view>

			<view
				class="flex  align-center solid-bottom padding-left-48 padding-tb padding-right justify-between relative ">
				<view class="text-bold text-333">
					{{ i18n["抬头类型"] }}
				</view>
				<view class=" flex align-center justify-end">
					<label class="radio flex align-center justify-end" @click="changeRise(1)">
						<radio class="radio-scale" :color="themeColor" :checked="invoiceData.invoice_type == 1"
							style="transform: scale(0.7)" /><text
							class="margin-right-40 margin-left-16">{{ i18n["个人"] }}</text>
					</label>
					<label class="radio flex align-center justify-end" @click="changeRise(2)">
						<radio class="radio-scale" :color="themeColor" :checked="invoiceData.invoice_type == 2"
							style="transform: scale(0.7)" /><text class="margin-left-16">{{ i18n["企业"] }}</text>
					</label>
				</view>
			</view>
			<view
				class="flex align-center padding-left-48 padding-tb padding-right solid-bottom justify-between relative ">
				<view class=" relative text-bold text-333 active flex-shrink">
					{{ i18n["发票抬头"] }}
				</view>
				<view class="text-333 text-right text-lg w75">
					<input v-if="invoiceData.invoice_type == 1" type="text" placeholder-class="grey-text"
						v-model="invoiceData.invoice_title" :placeholder="i18n['发票抬头不能为空']"  maxlength="64"/>
					<input v-if="invoiceData.invoice_type == 2" type="text" placeholder-class="grey-text"
						v-model="invoiceData.invoice_title" :placeholder="i18n['发票抬头不能为空']" maxlength="64"/>
				</view>
			</view>
			<view
				class="flex align-center padding-left-48 padding-tb padding-right solid-bottom justify-between relative "
				v-show="invoiceData.invoice_type == 2">
				<view class="relative text-bold text-333  active flex-shrink">
					{{ i18n["公司税号"] }}
				</view>
				<view class="w75 text-333 text-right text-lg">
					<input type="text" placeholder-class="grey-text" maxlength="24"
						v-model="invoiceData.invoice_company_duty_paragraph" :placeholder="i18n['企业单位税号不能为空']" />
				</view>
			</view>
			<view class="flex align-center padding-left-48 padding-tb padding-right justify-between relative">
				<view class=" text-bold text-333 ">
					{{ i18n["设置为默认抬头"] }}
				</view>
				<view class=" text-333 text-right text-lg">
					<checkbox-group class="block" @change="defalutRise">
						<checkbox style="transform: scale(0.7)" :color="themeColor" class="round"
							:class="invoiceData.is_default == 1 ? 'checked' : ''"
							:checked="invoiceData.is_default == 1 ? true : false" value="1"></checkbox>
					</checkbox-group>
				</view>
			</view>
		</view>
		<!-- 发票明细 end -->

		<!-- 发票内容 start -->
		<view class="text-lg bg-white border-box solid-top margin-top-20">
			<view class="flex align-center padding-left-48 padding-tb padding-right justify-between relative">
				<view class=" text-bold text-333 ">
					{{ i18n["发票内容"] }}
				</view>
				<view class="">
					<text>{{ i18n["商品明细"] }}</text>
				</view>
			</view>
		</view>
		<!-- 发票内容 end -->
		<!-- 联系方式 start -->
		<view
			class="flex  margin-top-20 text-lg bg-white align-center align-center solid-bottom padding-left-48 padding-tb padding-right justify-between relative "
			>
			<view class=" flex-shrink relative text-bold text-333 active ">
				{{ i18n["联系方式"] }}
			</view>
			<view class="w75 text-333 text-right text-lg">
				<input type="number" placeholder-class="grey-text" :placeholder="i18n['请输入手机号']" maxlength="11"
					v-model="invoiceData.invoice_mobile" @input="handleInput" />
			</view>
		</view>
		<!-- 联系方式 end -->
		<!-- 电子邮箱 start -->
		<view
			class="flex  text-lg bg-white align-center align-center padding-left-48 padding-tb padding-right justify-between relative">
			<view class="active text-bold relative text-333 flex-shrink ">
				{{ i18n["电子邮箱"] }}
			</view>
			<view class=" text-333 text-right text-lg w75">
				<input type="text" placeholder-class="grey-text" v-model="invoiceData.invoice_email"
					:placeholder="i18n['电子邮箱不能为空']" />
			</view>
		</view>
		<!-- 电子邮箱 end -->

		<!-- 确认按钮 start -->
		<view  class="bg-theme margin-lr text-center text-white text-lg margin-top-160 height-88 line-height-88 radius-100"
			@click="submitClick">
			<text>{{ i18n["提交"] }}</text>
		</view>
		<!-- 确认按钮 end -->
	</view>
</template>

<script>
	import {
		validate
	} from "@/common/utils/index.js";
	export default {
		data() {
			return {
				invoiceData: {
					invoice_type: 1, //1个人2企业
					invoice_title: "", //抬头
					invoice_company_duty_paragraph: "", //税号
					invoice_mobile: this.$store.getters.userInfo._mobile || '', //联系方式
					// invoice_mobile:'', //联系方式
					invoice_email: "", //电子邮件
					is_default: "1", //默认抬头
				},
				type: 0, //type为时说明是确认订单页进来
				isClick: false, // {Boolean} 是否展开企业发票明细
				showPhone: "", //用来展示的手机号
				order_sn: '', //订单号
				payable_money: '', //发票金额
				isEdit: '',
				// invoice_title_person: '', //个人默认抬头
				// invoice_title_company: '', //企业默认抬头
				isPerson: true, //进入页面，塞入默认抬头（个人）
				isCompany: true, //进入页面，塞入默认抬头（企业）
				itemIndex:'',//订单进入索引
				themeColor:'#B82441'

			};
		},
		filters: {
			mobilePass(val) {
				if (validate(val, "phone")) {
					return val.substr(0, 3) + "****" + val.substr(-4);
				}
				return val;
			}
		},
		onLoad(option) {
			this.setNavigationBarTitle(this.i18n["申请开票"]);
			console.log(option, '=============');
			let {
				type,
				invoice,
				order_sn,
				payable_money,
				status,
				itemIndex
			} = option;
			let invoiceData;
			// 确认订单页过来，这时需要注意该页面是不调用接口的，信息都是返回确认订单页
			if (invoice) {
				invoiceData = JSON.parse(invoice);
			}
			
			if (type == 1) {
				// 结算页进入
				this.type = type;
				if (invoiceData && invoiceData.invoice_title) {
					this.invoiceData = invoiceData;
				}else{
					this.getDefalutInfo()
				}
			} else {
				this.itemIndex=itemIndex
				// 订单进入
				// 这里是我的订单跳转而来，此时会携带order_sn订单号，payable_money订单金额，status发票状态，0未开票，1已申请，2已开票
				this.order_sn = order_sn;
				this.payable_money = payable_money;
				this.getDefalutInfo()
			}
		},
		methods: {
			handleInput(e) {
				this.invoiceData.invoice_mobile = e.detail.value;
			},
			/**
			 * @description 手机号过滤中间四位用*代替
			 */
			filterMobile() {
				if (!this.invoiceData.invoice_mobile) return "";
				let phone = this.invoiceData.invoice_mobile;
				if (!validate(phone, "phone")) {
					this.$message.info(this.i18n["请检查手机号"]);
				} else {
					this.showPhone = phone.substr(0, 3) + "****" + phone.substr(-4);
				}
			},
			defalutRise(e) {
				this.invoiceData.is_default =
					e.detail.value[0] == 1 ? e.detail.value[0] : 2;
			},
			/**
			 * @event
			 * @description 点击提交按钮
			 */

			submitClick() {
				if (!this.invoiceData.invoice_title.trim()) {
					this.$message.info(this.i18n["请输入发票抬头"]);
					return;
				}
				if (this.invoiceData.invoice_type == 2) {
					if (!validate(this.invoiceData.invoice_company_duty_paragraph, "paragraph")) {
						this.$message.info(this.i18n["输入税号有误"]);
						return;
					}
				}
				if (!this.invoiceData.invoice_mobile) {
					this.$message.info(this.i18n["请输入联系方式"]);
					return;
				}
				if (!validate(this.invoiceData.invoice_mobile, "phone")) {
					this.$message.info(this.i18n["请检查手机号"]);
					return;
				}
				if (!this.invoiceData.invoice_email) {
					this.$message.info(this.i18n["请输入邮箱"]);
					return;
				}
				if (!validate(this.invoiceData.invoice_email, "email")) {
					this.$message.info(this.i18n["请检查邮箱"]);
					return;
				}
				let invoice_info = {
					invoiceData: this.invoiceData,
					type: this.type,
					order_sn: this.order_sn || 0,
					payable_money: this.payable_money || 0
				}
				uni.navigateTo({
					url: '/pages/invoice/invoice/apply-invoice-sure/index?itemIndex='+this.itemIndex+'&invoice_info=' + JSON.stringify(
						invoice_info)
				})
				// this.getInvoice(this.invoiceData);
				// if(this.type == 1){
				//  	uni.$emit("select_invoice", this.invoiceData);
				//    		uni.navigateBack();
				// }else{
				//  this.getInvoice(this.invoiceData);
				// }

			},
			/**
			 * @event
			 * @description 选择抬头类型
			 * @param {Number} type - 1：个人或事业单位；2：企业；
			 */
			changeRise(type) {
				this.invoiceData.invoice_type = Number(type);
				this.getDefalutInfo()
			},
			/**
			 * @description 发票申请
			 * @param {Object} data 入参
			 */
			getInvoice(data) {
				data.order_sn = this.order_sn;
				data.invoice_price = Number(this.payable_money);
				for (let item in data) {
					if (data[item] == null) {
						delete data[item]
					}
				}
				if (this.isEdit) {
					this.$api
						.post(global.apiUrls.invoiceUpdate, data)
						.then(res => {
							if (res.data.code == 1) {
								this.$message.success(this.i18n['修改成功']);
								setTimeout(() => {
									uni.$emit('onPageUpdata', {
										type: 5,
										data: {
											itemIndex: this.itemIndex
										},
										order_sn: this.order_sn,
										msg: this.i18n['发票']
									});
									uni.navigateBack({
										delta: 1
									});
								}, 800);
							} else {
								this.$message.info(res.data.msg);
							}
						})
						.catch(err => {
							console.log(err);
						});

				} else {
					this.$api
						.post(global.apiUrls.postInvoiceApply, data)
						.then(res => {
							if (res.data.code == 1) {
								this.$message.success(this.i18n['申请成功']);
								setTimeout(() => {
									uni.$emit('onPageUpdata', {
										type: 5,
										data: {
											itemIndex: this.itemIndex
										},
										msg: this.i18n['发票']
									});
									uni.navigateBack({
										delta: 1
									});
								}, 800);
							} else {
								this.$message.info(res.data.msg);
							}
						})
						.catch(err => {
							console.log(err);
						});

				}
			},
			// postDefaltInvoice  获取默认抬头
			getDefalutInfo() {
				this.$api
					.post(global.apiUrls.postDefaltInvoice, {
						invoice_type: this.invoiceData.invoice_type, //1个人  2 企业
					})
					.then(res => {
						let data=res.data.data;
						if (res.data.code == 1) {
							if(data.length != 0){
								this.invoiceData = {
									invoice_type:this.invoiceData.invoice_type,
									invoice_title: data.invoice_title||'', //抬头
									invoice_company_duty_paragraph: data.invoice_company_duty_paragraph||'', //税号
									invoice_mobile: data.invoice_mobile || this.$store.getters.userInfo._mobile, //联系方式
									invoice_email: data.invoice_email||"", //电子邮件
									is_default: data.invoice_is_default||1, //默认抬头
								}
							}
						} else {
							this.$message.info(res.data.msg);
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			/**
			 * @description 获取发票详情   如果是修改发票  获取发票原来填写的信息
			 * @param {String} order_sn 订单号
			 */
			getInvoiceData(order_sn) {
				this.$api
					.post(global.apiUrls.pistInvoiceSelect, {
						order_sn: order_sn
					})
					.then(res => {
						console.log(res);
						if (res.data.code == 1) {

						} else {
							this.$message.info(res.data.msg);
						}
					})
					.catch(err => {
						console.log(err);
					});
			}
		},
	};
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.active {
		&::before {
			content: "*";
			position: absolute;
			left: -18rpx;
			top: 4rpx;
			color: #fa2033;
		}
	}

	.bg-item {
		background: #FAEDF0;
	}

</style>
